<template>
  <div id="login">
    <!-- 头部 -->
    <div class="header">
      <div class="header-con">
        <div class="header-logo" @click="toHome">
          <div class="header-logo-con">
             <img src="../img/logo.png" alt>
          </div>
        </div>
      </div>
    </div>
    <!-- 主体部分 -->
    <div class="main">
      <div class="main-img">
        <img src="../img/登录页背景.png" alt>
      </div>

      <!-- 表单内容 -->
      <div class="from-con">
        <!-- 表单标题 -->
        <div class="from-title">
          <div class="from-title-text1">
            <p>好多单</p>
          </div>
          <div class="from-title-text2">-精选更多优质好单-</div>
        </div>

        <div class="from">
          <!-- 注册表单注册表单注册表单注册表单注册表单注册表单 注册表单注册表单注册表单注册表单注册表单注册表单注册表单注册表单注册表单注册表单注册表单注册表单注册表单注册表单注册表单注册表单注册表单注册表单注册表单注册表单注册表单注册表单注册表单注册表单-------------------------------------------------------- -->
          <div class="right_text">
            <h3>
              欢迎注册
              <a href="#">
                已有账号？
                <span @click="toLogin">点此登录</span>
              </a>
            </h3>
            <form action="#" method="post">
              <div class="form-input">
                <!-- element ui  -->
                 <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

                  <el-form-item label="" prop="phoneNum">
                    <el-input v-model.number="ruleForm.phoneNum" placeholder="手机号/邮箱/用户名"></el-input>
                  </el-form-item>

                  <el-form-item label="" prop="yzm">
                    <el-input style="width:50%;" v-model="ruleForm.yzm" autocomplete="off"></el-input>
                    <input
                      style="
                        border: 0;
                        background-color: transparent;
                        outline: none;
                        margin-left:17px;
                        width: 45%;
                        height:40px;
                        background-color:#ccc !important;
                        border-radius: 3px;
                      "
                      id="yanzhengma btn2"
                      type="button"
                      :disabled="setdisabled"
                      @click="getnum($event);getyzm()"
                      :value="setText"
                    >
                  </el-form-item>

                  <el-form-item label="" prop="pass">
                    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                  </el-form-item>

                  <el-form-item label="" prop="checkPass">
                    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button style="
                      width: 100%;
                      background:linear-gradient(90deg,rgba(217,46,30,1),rgba(255,86,43,1));
                      height: 45px;
                      color: #FFFFFF;
                      border: 0;
                      text-align: center !important;
                    " type="primary" @click="submitForm('ruleForm')">注册</el-button>
                  </el-form-item>
                </el-form>
                <div class="errText">
                  <p @click="resetForm('ruleForm')">重置</p>
                  <!-- <p v-show='code==-1'>账号已经存在，请前去登录</p> -->
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../scss/register.scss";
import "../scss/drag.scss";
import '../scss/home.scss';
import ApiStorage  from "../utils/ApiStorage.js";
import ApiCookie from '../utils/ApiCookie.js';
import ApiCheck from "../utils/ApiCheck.js";
import qs from 'qs';

export default {
  data() {
     var checkPhone= (rule,value,callback) => {
      if (!value) {
          return callback(new Error('输入正确账号格式'));
      }
      callback();
    };
    // 检查年龄方法
    var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      // 检查密码
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      // 检查再次输入密码
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      // 验证码
      var checkyzm = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('验证码不能为空'));
        }
        callback();
      };
    return {
      ruleForm: {
          pass: '',
          checkPass: '',
          age: '',
          phoneNum:'',
          yzm:''
        },
      rules: {
        pass: [
          { validator: validatePass, trigger:'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        phoneNum:[
          {validator: checkPhone, trigger:'blur'}
        ],
         yzm:[
          {validator: checkyzm, trigger:'blur'}
        ]
      },
      // 用户token
      token:'',
      // 按钮显示的文本
      setText: "获取手机验证码",
      // 验证按钮是否可选中
      setdisabled: false,
      // 显示时间
      time: 60,
      // 验证码数据
      parentMsg:0,
      // 判断是否已经登录值
      code:false,
    };
  },
  methods: {
    // 注册部分
    submitForm(formName) {
      console.log('输出信息：',this.ruleForm.phoneNum)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
            this.goRegister();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 存储token
    setToken(){
      ApiCookie.setCookie("data",this.token,1);
    },
    // 注册时获取验证码data_from为空
    getyzm(){
      // 请求数据验证
      this.axios.post("/getyzm/register/sendsms",{
                dd_phone:this.phone,
                method:'reg'
      }).then((res) => {
          console.log("获取验证码", res);
      });
    },
    // 注册账号
    goRegister(){
      // 获取本地数据,看是否存在token,如果有就
      var getData = ApiStorage.get('data');
      this.axios.post("/getyzm/register/index",{
              dd_phone:this.ruleForm.phoneNum,
              dd_code:this.ruleForm.yzm,
              dd_password:this.ruleForm.pass,
              dd_confirmpassword:this.ruleForm.checkPass
          }).then(res => {
          console.log("注册回调：", res);
          this.code = res.data.code;
          // 删除定时器
          this.time = 0;
      });
    },
    //定时器
    interval() {
      //setInterval()  执行多次的定时器
      var t3 = setInterval(() => {
        if (this.time == 0) {
          clearInterval(t3); //清除定时器
          // 重置数据
          this.time = 60;
          this.setdisabled = false;
          this.setText = "获取手机验证码";
          // 清空验证码的数据
          this.phoneyzm="";
          return; //退出函数
        }
        // 每过一秒更新文本
        this.setText = `${this.time}S后重新获取`;
        this.time--;
      }, 1000);
    },

    // 点击获取手机验证码事件
    getnum() {
      // 判断是否执行定时器
      // 判断文本和按钮可选状态显示
      if (this.setText == "获取手机验证码") {
        this.setdisabled = true;
        this.setText = `60S后重新获取`;
      } else {
        this.setdisabled = false;
        this.setText = "获取手机验证码";
      }
      if (this.time == 60) {
        this.interval();
      }
    },
    //跳转到首页
    toHome() {
      this.$router.push({ name: "product" });
    },
    // 跳转到登录页
    toLogin(){
         this.$router.push({ name: "login" });
    }
  },
};
</script>



